<!-- 登录页 -->
<template>
<div class="container_login">
    <!-- 头部文字 -->
    <div class="head">
        <div class="head_title">欢迎使用健康管理小助手</div>
        <div class="head_des">
            <span>推荐饮食</span>
            <span>推荐运动</span>
            <span>每日记录</span>
            <span>健康测评</span>
        </div>
    </div>
    <!-- 表单部分 -->
    <div class="form">
        <!-- 提示 -->
        <div class="tips">首次登录即视为注册</div>
        <!-- 输入框 -->
        <div class="inputs">
            <van-cell-group inset>
                <van-field clearable type="tel" v-model="phone" :left-icon="phoneIconUrl" placeholder="请输入手机号码" maxlength="11" />
                <van-field type="digit" v-model="regcode" :left-icon="regcodeIconUrl" placeholder="请输入验证码" maxlength="6">
                    <template #button>
                        <van-button v-show="!sendingState" size="mini" hairline round color="#639339" @click="sendCodeMsg">发送验证码</van-button>
                        <van-button v-show="sendingState" size="mini" hairline round disabled>{{countDown}}秒后重发</van-button>
                    </template>
                </van-field>
            </van-cell-group>
        </div>
        <!-- 登录按钮 -->
        <div class="submit" @click="login">登 录</div>
    </div>

</div>
</template>

<script>
import {
    apiRequest
} from '../assets/js/axios_api';
import phoneIconUrl from '../assets/img/phone_icon.png';
import regcodeIconUrl from '../assets/img/regcode_icon.png';
export default {
    metaInfo() {
        return {
            title: '欢迎登录'
        }
    },
    name: 'Login',
    data() {
        return {
            phone: '', //手机号码
            regcode: '', //输入的短信验证码
            sendcode: '', //接口返回验证码
            sendingState: false, //已发送-true，未发送-false
            showTime: 60, //发送验证码倒计时时间
            countDown: 0,
            phoneIconUrl: phoneIconUrl, //手机号码图标
            regcodeIconUrl: regcodeIconUrl, //验证码图标
        }
    },
    components: {

    },
    methods: {
        // 点击发送验证码
        sendCodeMsg() {
            let phoneRule = /^1[3|4|5|6|7|8|9]\d{9}$/;
            if (phoneRule.test(this.phone)) {
                let phonenum = this.phone;
                // get请求
                apiRequest(this, 'getSmsCode/' + phonenum, '', resData => {
                    // 验证码发送成功，开始倒计时
                    this.sendingState = true;
                    this.countDown = this.showTime;
                    let timer = setInterval(() => {
                        this.countDown--;
                        if (this.countDown <= 0) {
                            clearInterval(timer);
                            this.countDown = this.showTime;
                            this.sendingState = false;
                            timer = null;
                        }
                    }, 1000);
                    // 验证码赋值
                    this.sendcode = resData.smsCode;
                    console.log('验证码：' + this.sendcode)
                }, 'get')
            } else {
                this.$toast({
                    message: '请输入正确的手机号码',
                    duration: 1500
                })
            }
        },
        // 点击登录
        login() {
            if (this.regcode && this.regcode === this.sendcode) {
                // 调用登录接口
                let param = {
                    "phonenum": this.phone,
                    "smsCode": this.regcode
                }
                apiRequest(this, 'login', param, resData => {
                    // 返回成功要做的事
                    let getUserInfo = resData.user
                    let userInfo = {
                        cusId: getUserInfo.cusId,
                        name: getUserInfo.cusName,
                        phone: getUserInfo.phonenum,
                        gender: getUserInfo.gender,
                        birthday: getUserInfo.birth,
                        height: getUserInfo.height,
                    }
                    sessionStorage.setItem('token', resData.token)
                    sessionStorage.setItem('userInfo', JSON.stringify(userInfo))
                    sessionStorage.setItem('tabState', 'homeBtn')
                    if (userInfo.name) {
                        if (userInfo.height) {
                            let queryParam = {
                                cusId: userInfo.cusId,
                            }
                            apiRequest(this, 'hmweightrecord/page', queryParam, queryWeightsData => {
                                if (queryWeightsData.list.length > 0) {
                                    userInfo.weight = queryWeightsData.list[0].weight;
                                    userInfo.bmi = parseFloat(userInfo.weight / ((userInfo.height / 100) * (userInfo.height / 100))).toFixed(2);
                                    sessionStorage.setItem('userInfo', JSON.stringify(userInfo))
                                    this.$router.push('/home')
                                } else {
                                    this.$router.push('/recweight')
                                }
                            }, 'get')
                        } else {
                            this.$router.push('/recheight')
                        }
                    } else {
                        this.$router.push('/baseinfoedit')
                    }
                }, 'post')
            } else {
                this.$toast({
                    message: '请输入正确的验证码',
                    duration: 1500
                })
            }
        }
    }
}
</script>

<style lang="less">
@import "../assets/css/common.less";

.container_login {
    background-color: @img-color;
    // background-image: url(../assets/img/bg_img.png);
    background-image: url(../assets/img/bg_1.jpeg);
    // background-image: url(../assets/img/bg_4.jpeg);
    background-size: 100%;
    background-repeat: no-repeat;

    // 顶部样式
    .head {
        background-size: 100%;
        text-align: center;
        padding: 3.75rem 0;

        .head_title {
            font-size: 1.25rem;
            font-weight: bold;
            color: #3f3f3f;
        }

        .head_des {
            // color: #fff;

            span {
                display: inline-block;
                margin: 1.25rem 0.625rem;
            }
        }
    }

    // 表单部分样式
    .form {
        background-color: #fff;
        border-top-left-radius: 1.25rem;
        border-top-right-radius: 1.25rem;
        padding-top: 1.875rem;

        // 提示文字
        .tips {
            padding: 0 1.5rem;
            color: @tip-color;
        }

        // 登录按钮
        .submit {
            margin: 8.75rem 1.5rem 0;
            background-color: @img-color;
            color: #fff;
            height: 2.75rem;
            line-height: 2.75rem;
            text-align: center;
            border-radius: 0.625rem;
        }

        // 自定义输入框样式
        .inputs .van-cell.van-field {
            background-color: @bg-color;
            font-size: 0.8125rem;
            margin: 1.875rem 0;
            border-radius: 1.25rem;
        }

        // 自定义输入框小图标位置
        .inputs .van-icon {
            position: relative;
            top: 0.375rem;
        }

        // 自定义手机号码清除内容小图标位置
        .inputs .van-icon-clear {
            position: relative;
            top: -0.0625rem;
        }
    }
}
</style>
